<template>
	<div style="background-color: #f6f6f6; min-height: 100vh">
		<div class="header">
			<i>问题反馈</i>
			<img src="@/assets/feedback.png" alt="" />
		</div>
		<van-form
			scroll-to-error
			validate-first
			@failed="onFailed"
			@submit="onSubmit"
		>
			<van-cell-group inset>
				<!-- 通过 pattern 进行正则校验 -->
				<van-field
					size="large"
					label-align="top"
					label="姓名"
					v-model="name"
					name="name"
					placeholder="请输入姓名"
					:rules="[{ required: true, message: '怎么称呼您呢' }]"
				/>
				<van-field
					size="large"
					label="手机号码"
					label-align="top"
					v-model="phone"
					name="contact"
					placeholder="请输入电话号码"
					:rules="[{ required: true, message: '我们需要您的联系方式' }]"
				/>
				<van-field
					label="相关公司"
					:model-value="insuranceName"
					label-align="top"
					is-link
					readonly
					size="large"
					name="insurance"
					placeholder="点击选择保险公司"
					@click="showPopup = true"
					:rules="[{ required: true, message: '请选择相关的保险公司' }]"
				/>
				<van-popup
					v-model:show="showPopup"
					position="bottom"
					closeable
					close-on-popstate
					:lock-scroll="false"
				>
					<div>
						<div style="line-height: 3em; font-size: 36rem; text-align: center">
							选择相关保险公司
						</div>
						<selecter
							style="height: 70vh"
							:list="insurances"
							v-model="insuranceId"
							@confirm="showPopup = false"
						/>
					</div>
				</van-popup>
				<van-field
					label="问题描述"
					label-align="top"
					size="large"
					type="textarea"
					rows="3"
					autosize
					clearable
					v-model="remark"
					name="content"
					placeholder="请输入问题描述"
					:rules="[{ required: true, message: '请简要描述您的问题' }]"
				/>
			</van-cell-group>
			<div style="margin: 16px">
				<van-button
					size="36rem"
					round
					block
					type="primary"
					native-type="submit"
				>
					提交
				</van-button>
			</div>
		</van-form>
	</div>
</template>
<script>
import { ApiInsuranceOptions, ApiBacksave } from '@/api'
import { showToast } from 'vant'
import zhSplit from '@/utils/zh-split'
import selecter from '@/components/selecter.vue'
export default {
	components: {
		selecter
	},
	data() {
		return {
			name: '',
			insuranceId: '',
			phone: '',
			remark: '',
			showPopup: false,
			insurances: []
		}
	},
	computed: {
		insuranceName() {
			return (
				this.insurances
					.map((item) => item.data)
					.flat()
					.find((item) => item.id == this.insuranceId)?.name || ''
			)
		}
	},
	mounted() {
		ApiInsuranceOptions().then((res) => {
			this.insurances = zhSplit(res.data, 'name')
		})
	},
	methods: {
		onFailed(e) {
			console.log(e)
		},
		onSubmit(data) {
			data.insuranceId = this.insuranceId
			ApiBacksave(data).then(() => {
				showToast({
					message: '提交成功！您的问题已记录'
				})
			})
		},
		handlePickerConfirm({ selectedOptions }) {
			this.insurance = selectedOptions[0]
			this.showPopup = false
		}
	}
}
</script>

<style scoped lang="scss">
.header {
	height: 280px;
	margin-bottom: 50px;
	background: rgb(186, 186, 235);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 70px;
	background-image: linear-gradient(left, rgb(19 111 204), rgb(79 41 125));
	i {
		font-family: ZCoo GaoduanHei;
		font-size: 62px;
		color: #fff;
	}

	img {
		height: 210px;
		width: auto;
		filter: drop-shadow(0 0 20px #0048ff);
	}
}

::v-deep .van-form .van-field__body {
	font-size: 32px !important;
}
</style>
